<template>
	<view class="container" :style="colorStyle">
		<view class="form">
			<view class="form-item">
				<view class="label">营业执照统一信息码</view>
				<view class="input">
					<input v-model="form.code" type="text" placeholder="请输入所在公司营业执照统一信息码" />
				</view>
			</view>
			<view class="form-item">
				<view class="label">姓名</view>
				<view class="input">
					<input v-model="form.name" type="text" placeholder="请输入真实姓名" />
				</view>
			</view>
			<view class="form-item">
				<view class="label">身份证号</view>
				<view class="input">
					<input v-model="form.idCard" type="idcard" placeholder="请输入您的身份证号" />
				</view>
			</view>
		</view>
		<view class="acea-row row-middle row-center">
			<button class="btn" @click="onAuth">认证</button>
		</view>
		
		<!-- 确认框 -->
		<tuiModal :show="showModal" :maskClosable="false" :custom="true">
			<view class="modal_box">
				<block v-if="type == 1">
					<view class="">企业认证匹配失败</view>
					<view class="blue" @click="callPhone">请联系客服</view>
				</block>
				<block v-if="type == 2">
					<view class="">企业认证已提交</view>
					<view class="">请等待审核</view>
					<view class="desc">
						<view class="">人工审核时间1-3个工作日</view>
						<view class="">审核结果将通过短信告知</view>
					</view>
				</block>
				<block v-if="type == 3">
					<view class="">当前企业绑定人数已满</view>
					<view class="">如需登录，<text class="blue" @click="callPhone">请联系客服</text></view>
				</block>
				
				<button class="knowbtn" @click="onClose">知道了</button>
			</view>
		</tuiModal>
	</view>
</template>

<script>
	import colors from '@/mixins/color.js';
	import { companyAuthApi } from '@/api/user.js';
	import tuiModal from "@/components/tui-modal/index.vue";
	export default {
		components: { tuiModal },
		data() {
			return {
				form: {
					code: '',
					name: '',
					idCard: ''
				},
				showModal: false,
				type: 1
			};
		},
		mixins:[colors],
		methods: {
			onAuth() {
				if(!this.form.code) return this.$util.Tips({ title: '请填写公司营业执照统一信息码' });
				if(!this.form.name) return this.$util.Tips({ title: '请填写真实姓名' });
				if(!this.form.idCard) return this.$util.Tips({ title: '请填写身份证号' });
				let pattern = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
				if(!pattern.test(this.form.idCard)) return this.$util.Tips({ title: '请填写正确的身份证号' });
				uni.showLoading({
					title: '认证中...',
					mask: true
				});
				companyAuthApi({
					USCI: this.form.code,
					real_name: this.form.name,
					id_card: this.form.idCard
				}).then(res => {
					uni.hideLoading()
					// setTimeout(() => {
					// 	this.$util.Tips({
					// 		title: res.msg,
					// 		icon: 'none'
					// 	}, {
					// 		tab: 4,
					// 		url: '/pages/user/index'
					// 	});
					// }, 100)
					this.$store.commit('LOGOUT');
					this.type = 2
					this.showModal = true
				}).catch(err => {
					uni.hideLoading()
					this.$store.commit('LOGOUT');
					if(err.status) {
						const mapObj = {
							'101': 1,
							'102': 2,
							'103': 3
						}
						this.type = mapObj[err.status]
						this.showModal = true
					} else {
						uni.showToast({
							title: err,
							icon: 'none'
						})
					}
				})
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: '4008106188'
				})
			},
			onClose() {
				this.showModal = false
				uni.reLaunch({
					url: '/pages/user/index'
				})
			}
		}
	}
</script>

<style>
page {
	width: 100%;
	background-color: #fff;
}
</style>
<style lang="less" scoped>
.container {
	padding: 30rpx;
	.form {
		width: 100%;
		padding: 30rpx;
		border: 1px solid #ddd;
		border-radius: 30rpx;
		background-color: #f5f5f5;
		margin-bottom: 100rpx;
		.form-item {
			&:not(:last-child) {
				border-bottom: 1px solid #ddd;
			}
			.label {
				font-size: 30rpx;
				color: #000;
				padding-top: 30rpx;
			}
			.input {
				input {
					height: 90rpx;
					line-height: 90rpx;
					font-size: 30rpx;
				}
			}
		}
	}
	.btn {
		width: 450rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
		font-size: 30rpx;
		color: #fff;
		background-color: var(--view-theme);
	}
}
.modal_box {
	padding: 40rpx;
	text-align: center;
	font-size: 32rpx;
	line-height: 54rpx;
	.blue {
		color: blue;
	}
	.desc {
		font-size: 24rpx;
		color: #999;
		line-height: 36rpx;
		margin-top: 20rpx;
	}
	.knowbtn {
		display: block;
		width: 250rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 70rpx;
		font-size: 28rpx;
		color: #fff;
		margin: 50rpx auto 0;
		background-color: var(--view-theme);
	}
}
</style>
